<template>
	<div class="newsinfo-container">
		<!-- 大标题 -->
		<h3 class="title">{{newsinfo.title}}</h3>
		<!-- 子标题 -->
		<p class="subtitle">
			<span>发表时间：{{newsinfo.add_time | dateFormat}}</span>
			<span>点击：{{newsinfo.click}}次</span>
		</p>

		<hr>
		
		<!-- 内容区域 -->
		<div class="content" v-html="newinfo.content"></div>

		<!-- 评论子组件区域 :id="this.id" 父组件向子组件传值-->
		<comment-box :id="this.id"></comment-box>

	</div>
</template>

<script>

//1、导入评论子组件
import comment from '../subcomponents/comment.vue'

export default{
	data(){
		return{
			//将 url 地址中传递过来的 id 值，挂载到data上，方便以后调用
			id: this.$route.params.id,
			newsinfo:{} //新闻对象
		}
	},

	created(){
		this.getNewsInfo()
	},

	methods:{
		getNewsInfo(){ //获取新闻详情
			this.$http.get('api/getnew/' + this.id).then(result => {
				if (result.body.status === 0) {
					this.newsinfo = result.body.message[0];
				}else{
					Toast('获取新闻失败！')
				}
			})
		}
	},

	components:{ //用来注册子组件的
		"comment-box": comment
	}
}
	
</script>

<style lang="scss" scoped>

.newsinfo-container{
	padding:0 4px;

	.title{
		font-size: 16px;
		text-align: center;
		margin:15px 0;
		color: red;
	}

	.subtitle{
		font-size: 13px;
		color: #226aff;
		//设置两端对齐
		display: flex;
		justify-content:space-between;
	}

	//如果想让图片正常显示把上面的 scoped 去掉，原因现在还无法解释
	.content{
		img{
			width: 100%;
		}
	}
}
	
</style>